<template>
	<view class="money-card">
		<view class="money-card-left">
			<view class="money-card-name">
				{{name}}
			</view>
			<view class="money-card-number">
				{{number}}
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: '爆点'
			},
			number: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.money-card {
		display: flex;
		justify-content: space-between;
		width: 690rpx;
		height: 216rpx;
		padding: 48rpx;
		margin: 32rpx auto 0;
		border-radius: 16rpx;
		background: #fff;
		box-sizing: border-box;
		color: #333;

		.money-card-left {
			.money-card-name {
				font-size: 28rpx;
				font-weight: 500;
				line-height: 34rpx;
			}

			.money-card-number {
				font-family: D-DIN;
				margin-top: 18rpx;
				font-size: 72rpx;
				font-weight: bold;
				line-height: 72rpx;
			}
		}
	}
</style>
